<template>
  <!-- 默认插槽 -->
  <slot name='title' :tableData='tableData'>
    <h1>表格标题 - 插槽中默认组件</h1>
  </slot>
  <el-table :data='tableData' border @cell-dblclick='handleCellDblClick'>
    <template v-for='(item, index) in tableStyle' :key='index'>
      <el-table-column :prop='item.fieldName' :label='item.cn' >
        <template #default='scope'>
          <template v-if='scope.row.iid === dblIid'>
            <slot :name='item.fieldName'>
              <el-input :value='scope.row[item.fieldName]'></el-input>
            </slot>
          </template>
          <span v-else>{{ scope.row[item.fieldName] }}</span>
        </template>
      </el-table-column>
    </template>
  </el-table>
  <slot name='footer' :tableStyle='tableStyle'></slot>
</template>
<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'

const store = useStore()
const tableData = ref([])
const tableStyle = ref([])
const dblIid = ref(0)

const refreshTableData = () => {
  tableData.value = store.state.system.tableStyles.filter(item => item.tableName === 'sys_role')
}

const refreshTableStyle = () => {
  tableStyle.value = store.state.system.tableStyles.filter(item => item.tableName === 'table_style')
}

const handleCellDblClick = (row) => {
  dblIid.value = row.iid
}

refreshTableStyle()
refreshTableData()
</script>